import React from 'react';
import styles from './style.css'
import {getHeight, getHistory, uuid} from "../../util/uitls";
import pageRedux from '../pageRedux'
import MyLayout from '../../component/MyLayout';
import TalkItem from "./tallItem";
import TalkItemList from "./talkItemList";
import MyIconImage from "../../component/MyIconImage";
import MyModal from "../../component/MyModal";
import ModalContent from "./modalContent";
import {max, min, MyMap} from "../../util/lodash";
import {GET_TALK} from "../../api/talk";
import {clearNull} from "../../util/str";
import MyAlert1 from "../../util/alert";
import {createIOuuid, getSocket, sendMessageIO} from "../../util/socket";

export class TalkOne extends React.Component {
    constructor(props) {
        super()
        this.state = {
            more_visiable: false,
            onTextFocus: false,
            input: ""
        }
    }


    async componentDidMount() {
        var self = this

        var activeTalkUser = this.props.getStore("app.activeTalkUser")
        var user = this.props.getStore("app.user")
        this.io = getSocket(user.id, activeTalkUser.id)
        self.uuid = createIOuuid(user.id, activeTalkUser.id)
        this.io.on(self.uuid, function (res) {
            var messages = self.props.getStore(`app.activeTalkUserMessage${self.uuid}`)
            messages.push(res.message)
            self.props.setStore(`app.activeTalkUserMessage${self.uuid}`, messages)
            setTimeout(() => {
                var height = getHeight()
                document.body.scrollTop = height
            }, 200)
        })


        var messages = this.props.getStore(`app.activeTalkUserMessage${this.uuid}`)
        if (messages && messages.length > 0) {
            return false
        }
        var result = await GET_TALK({
            me_id: user.id,
            you_id: activeTalkUser.id
        })
        this.props.setStore(`app.activeTalkUserMessage${this.uuid}`, result.result)

    }

    sendMessage() {


        var message = clearNull(this.state.input)
        if (!message) {
            MyAlert1.fail("message is required to be not null")
            return false
        }
        var activeTalkUser = this.props.getStore("app.activeTalkUser")
        var user = this.props.getStore("app.user")

        var unit_id = `${max(user.id, activeTalkUser.id)}_${min(user.id, activeTalkUser.id)}`
        var messageObject = {
            create_time: "",
            id: uuid(),
            me_id: user.id,
            you_id: activeTalkUser.id,
            message: {id: 2.2827009457761704, content: message},
            message_id: 4.534158175473046,
            unit_id: unit_id,
            update_time: "",
        }
        sendMessageIO(user.id, activeTalkUser.id, messageObject)
        this.setState({input: ""})


    }

    inputChange(e) {
        this.setState({input: e.target.value})
    }

    render() {
        var self = this
        var activeTalkUser = this.props.getStore("app.activeTalkUser")
        var user = this.props.getStore("app.user")
        var messages = this.props.getStore(`app.activeTalkUserMessage${max(user.id, activeTalkUser.id)}_${min(user.id, activeTalkUser.id)}`
        ) || {}
        return <MyLayout title={activeTalkUser.name}>
            <TalkItemList>
                {
                    MyMap(messages, item => {
                        return <TalkItem isMe={user.id == item.me_id} {...item}
                                         me={user}
                                         you={activeTalkUser}
                        />
                    })
                }
            </TalkItemList>

            <div className={styles.bottom}
                 style={{position: !this.state.onTextFocus ? 'fixed' : "fixed"}}
            >
                <div className={styles.row1}>
                    <MyIconImage
                        onClick={() => {
                            self.setState({more_visiable: !this.state.more_visiable})
                        }}
                        image={"http://pj5qx5lsj.bkt.clouddn.com/%E6%9B%B4%E5%A4%9A.png"}></MyIconImage>
                    <div className={styles.inputWrapper}>
                            <textarea type="text"
                                      value={this.state.input}
                                      onFocus={() => {
                                          self.setState({onTextFocus: true})
                                      }}
                                      onBlur={() => {
                                          self.setState({onTextFocus: false})
                                      }}
                                      onChange={this.inputChange.bind(this)}
                            />
                        <button onClick={this.sendMessage.bind(this)}>发送</button>
                    </div>
                </div>
                {this.state.more_visiable && <div className={styles.row2}>
                    <ModalContent/>
                </div>}

            </div>
        </MyLayout>
    }
}

export default pageRedux(TalkOne)